# 3.34 wifi Real-time Display

## 3.34.1 Overview

In this project, we display the values of temperature and humidity sensor, pressure sensor, photoresistor, sound sensor, PIR motion sensor and ultrasonic sensor on the web page. 

## 3.34.2 Test Code

You can manually build blocks, or directly open the code file we provide: `3-34-Web Display Panel.ubp`. If you have any questions about how to open code files or upload code, please back to `1.9 Upload Code`.

**Build code blocks:**

1. In ![](./media/control.png), drag ![](./media/t1.png) to the script area.

2. Drag ![t195](./media/t195.png) and set the WIFI name to “LiuTest” and password to “88888888”.
3. Drag ![t196](./media/t196.png) and set the Web name to “CodingBox.local”.
4. Add ![t170](./media/t197.png) to refresh the data of each sensor on the Web page.
5. Add ![t198](./media/t198.png) and set the title to “Coding Box Web Panel”.
6. At last, drag some ![t199](./media/t199.png) to display the sensor data on the Web page, including temperature, humidity, air pressure, ultrasonic ranging distance, PIR motion and light sensor in sequence.

For example, add a temperature sensor value:

![t203](./media/t203-1752455338187-11.gif)

**Complete code:**

![t214](./media/t214.png)



## 3.34.3 Test Result

Connect the coding box to the MicroBlocks via USB or Bluetooth. Click ![t59](./media/t59.png) to upload code. After connecting to wifi, you can see an IP address: ![t212](./media/t212.png). Now connect your control device (mobile phone, tablet, computer) to the same wifi and search `codingbox.local` on the browser to enter the Web page. 

![t215](./media/t215.png)